<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="">  <!--链接外部样式-->
    <style>  <!--内部样式-->
        *{
            margin: 0;
            padding: 0;
        }
        /* css 选择器主要目的就是用来定位标签的（寻找的） */
        div {
            box-sizing: content-box; /*标准盒子*/
            box-sizing: border-box; /*IE盒子*/
        }
         /*元素/标签选择器*/
        div { 
            font-size: 10px !important;
        }
        /*id选择器*/
        /* #box{  
            color: red;
        } */
        /*类选择器*/
        /* .ft-30 {   
            font-size: 30px;
        }
        .w200 {
            width: 200px;
        } */
         /*属性选择器*/
        /* [name="title"] { 
            background-color: #333;
        } */
         /* 层级选择器 :   空格 后辈元素  > 直接子元素*/
        /* #box div {
            color: red;
        } */
        /*组合选择器 ：选择器1 ，选择器2 */
        /* span,ul{
            color: red;
        } */
        /*伪类选择器*/
        /* #box:hover {
            color: red;
        } */
         /*过滤选择器*/
        /* ul:nth-of-type(1){
            color: red;
        } */
        /* ul:nth-last-of-type(1){
            color: red;
        } */
        /* ul>li:first-child {
            color: red;
        } */
        /* ul:nth-of-type(1)>li:nth-of-type(2n+1) {
            color: red;
        } */
    
    </style>
    
</head>
<body>
    <!-- <div id="box" class="ft-30 w200" name="title">哈哈</div> -->
    <span name="title" >xxx</span>
    <hr>
    <!-- <div id="box">
        <ul>
            <div>haha</div>
        </ul>
        <div>北京</div>
        <div>广州</div>
    </div> -->

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ul style="color: red;">  <!--内联样式-->
        <li>5</li>
        <li>6</li>
    </ul>
    <script>
        // document.getElementByXxx()   方便获取（局限性大）
        // document.querySelector(CSS选择器)  获取单个DOM节点
        // document.querySelectorAll(CSS选择器) 获取DOM节点数组
        // document.querySelector("#box")
        // document.querySelector("ul>li");
        // document.querySelector('input[name="title"]');
        // $('input[name="title"]')

        // 原生DOM →  jQuery
        let xxx = document.getElementById("box"); 
        // xxx.innerHTML
        // xx.innerText
        // xx.value

        // 转jQuery,通用语法   $(JS对象)
        let yyy = $(xxx);
        // yyy.html()
        // yyy.text()
        // yyy.val()

        // jQUery  转成原生的JS对象,通过语法 ：  jQuery对象[0]
        let zzz = yyy[0];
    </script>
</body>
</html>